<template>
  <div class="pageComposition">
    <nut-avatar size="86" class="pageComposition-avatar">
      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
    </nut-avatar>
    <div class="pageComposition-nameplm">张 三</div>
    <div class="pageComposition-comany">浙江阿波罗运动科技股份有限公司</div>
    <div class="pageComposition-plan">
      <nut-grid :gutter="5" :column-num="2">
        <nut-grid-item text="今日排产队列">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.queueNo : 'KP1' }}</span>
        </nut-grid-item>
        <nut-grid-item text="今日排产数量">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.totalValue : '200' }}</span></nut-grid-item
        >
        <nut-grid-item text="今日生产数量">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.produced : '120' }}</span></nut-grid-item
        >
        <nut-grid-item text="今日未生产数量">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.unproduced : '80' }}</span></nut-grid-item
        >
      </nut-grid>
      <div class="pageComposition-plan-texlxs">当前排队号:</div>
      <div class="pageComposition-plan-texlxs">
        <span class="pageComposition-plan-texlxs-spanxzs">{{ !isNullPm(getDom) ? getDom.queueUp : '121' }}</span>
      </div>
      <img class="pageComposition-plan-imgax" src="@img/pageComposition/add.png" @click="skipToBourn('/taskSwitching')" />
    </div>
    <div class="pageComposition-plan">
      <nut-grid :gutter="5" :column-num="2">
        <nut-grid-item text="今日排产队列">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.queueNo : 'KP1' }}</span>
        </nut-grid-item>
        <nut-grid-item text="今日排产数量">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.totalValue : '200' }}</span></nut-grid-item
        >
        <nut-grid-item text="今日生产数量">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.produced : '120' }}</span></nut-grid-item
        >
        <nut-grid-item text="今日未生产数量">
          <span class="pageComposition-plan-pponm">{{ !isNullPm(getDom) ? getDom.unproduced : '80' }}</span></nut-grid-item
        >
      </nut-grid>
      <div class="pageComposition-plan-texlxs">当前排队号:</div>
      <div class="pageComposition-plan-texlxs">
        <span class="pageComposition-plan-texlxs-spanxzs">{{ !isNullPm(getDom) ? getDom.queueUp : '121' }}</span>
      </div>
      <img class="pageComposition-plan-imgax" src="@img/pageComposition/add.png" @click="skipToBourn('/taskSwitching')" />
    </div>
    <div class="pageComposition-appicon">
      <nut-grid :gutter="5" :column-num="3">
        <nut-grid-item text="智能统计" @click="skipToBourn('dataStatistics')">
          <img class="pageComposition-appicon-appimg" src="@img/pageComposition/datastatistics.png" />
        </nut-grid-item>
        <nut-grid-item text="终端查询">
          <img class="pageComposition-appicon-appimg" src="@img/pageComposition/analyze.png" />
        </nut-grid-item>
        <nut-grid-item text="排产查询">
          <img class="pageComposition-appicon-appimg" src="@img/pageComposition/planIop.png" />
        </nut-grid-item>
      </nut-grid>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importFunction from './pageComposition';
import { isNullPm } from '@/utils/baseMethods';
export default {
  components: {},
  setup() {
    const { base, skipToBourn, init } = importFunction();
    init();
    return {
      ...toRefs(base),
      skipToBourn,
      isNullPm,
    };
  },
};
</script>

<style lang="less" scoped>
.pageComposition {
  margin-bottom: 100px;
  &-avatar {
    margin: 60px auto 0;
    display: block;
  }
  &-nameplm {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin: 10px 0 5px;
    color: #1665b2;
  }
  &-comany {
    text-align: center;
    font-size: 12px;
    font-weight: 200;
  }
  &-plan {
    width: 90%;
    height: 260px;
    background: rgb(60, 97, 179);
    border-radius: 10px;
    margin: 32px auto 15px;
    position: relative;
    padding-top: 20px;
    &-texlxs {
      height: 40px;
      display: flex;
      justify-items: center;
      align-items: center;
      align-content: center;
      justify-content: center;
      color: aliceblue;
      text-align: center;
      font-size: 200;
      &-spanxzs {
        font-size: 30px;
        font-weight: 900;
      }
    }
    &-imgax {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 20px;
    }
    &-pponm {
      color: white;
    }
    :deep(.nut-grid-item__content) {
      background: none;
      border: none;
    }
    :deep(.nut-grid-item__text) {
      color: rgb(231, 231, 231);
    }
  }
  &-appicon {
    &-appimg {
      width: 42px;
    }
    :deep(.nut-grid-item__content) {
      background: none;
      border: none;
    }
  }
}
</style>
